<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const RulesPlugin = {
      install(Vue) {
        Vue.mixin({
          created() {
            const rules = this.$options.rules;
            if (rules) {
              Object.keys(rules).forEach(key => {
                const { validate, message } = rules[key];
                this.$watch(key, newValue => {
                  const result = validate(newValue);
                  if (!result) {
                    console.log(message);
                  }
                });
              });
            }
          }
        });
      }
    };

    Vue.use(RulesPlugin);

    const vm = new Vue({
      data: { foo: 10 },
      rules: {
        foo: {
          validate: value => value > 10,
          message: 'foo must be greater than one'
        }
      }
    });
  </script>
</body>
</html>
